<template>
  <div>
   <Card>
    <div style="height: 173px;"><EchartsChart :option="barOption"></EchartsChart></div>
   </Card>
   <Card>
    <EchartsChart :option="lineOption"></EchartsChart>
   </Card>
   <Card>
    <EchartsChart :option="pieOption"></EchartsChart>
   </Card>
  </div>
</template>

<script setup lang="ts">
import Card from '../../components/Card/index.vue'
import EchartsChart from "../../components/EchartsChart/index.vue";
import echarts from '@/plugins/echarts'
import {onMounted,reactive} from 'vue'

const style={
  height:'73px',
}


/* 左侧图表功能 start */
// 左侧图表功能
onMounted(() => {
  setTimeout(() => {
    const result = {
      barXaxis: [
        "旅游行业",
        "游戏行业",
        "电商行业",
        "医疗行业",
        "金融行业",
        "教育培训",
        "餐饮行业",
      ],
      barSeriesData: [300, 200, 400, 250, 550, 450, 350],
      lineXaxis: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      line1SeriesData: [
        300, 200, 400, 250, 550, 450, 300, 200, 400, 250, 550, 450,
      ],
      line2SeriesData: [
        250, 550, 450, 300, 200, 400, 250, 550, 450, 300, 200, 400,
      ],
      pieSeriesData: [
        {
          name: "20岁以下",
          value: 11,
        },
        {
          name: "20-29岁",
          value: 22,
        },
        {
          name: "30-39岁",
          value: 33,
        },
        {
          name: "40-49岁",
          value: 44,
        },
        {
          name: "50岁以上",
          value: 55,
        },
      ],
    };

    barOption.xAxis.data = result.barXaxis;
    barOption.series.data = result.barSeriesData;
    lineOption.xAxis.data = result.lineXaxis;
    lineOption.series[0].data = result.line1SeriesData;
    lineOption.series[1].data = result.line2SeriesData;
    pieOption.series.data = result.pieSeriesData;
  }, 500);
});
const barOption = reactive({
  title: {
    text: "各行业程序员数量",
  },
  xAxis: {
    data: [],
  },
  series: {
    name: "金融行业",
    type: "bar",
    data: [],
    barWidth: 15,
    itemStyle: {
      borderRadius: 3,
    },
  },
  tooltip: {
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    show: false,
  },
});

const lineOption = reactive({
  title: {
    text: "学习变化",
  },
  xAxis: {
    data: [],
  },
  series: [
    {
      name: "新增项目",
      type: "line",
      data: [],
      smooth: true,
    },
    {
      name: "新增技能",
      type: "line",
      data: [],
      smooth: true,
    },
  ],
});

const pieOption = reactive({
  title: {
    text: "工程师年龄分布",
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  series: 
    {
      name: "年龄分布",
      type: "pie",
      data: [],
      radius: ["35%", "50%"],
      label:false,
      labelLine: {
        show: false,
      },
    },
    legend: {
      top: "auto",
      bottom: 5,
      itemWidth: 8,
      left: "center",
    },
    tooltip:{
      trigger:'item',
      formatter:`{a}<br/>{b}:{c} ({d}%)`,
      textStyle:{
        fontSize:8,
      }
    }
  
   
  
});
</script>

<style scoped>

</style>